<!-- 代码已包含 CSS：使用 TailwindCSS , 安装 TailwindCSS 后方可看到布局样式效果 -->
<template>
  <main class="p-20 container bg-gray-100">
    <!-- <h2 class="text-2xl font-bold mb-6 text-gray-800">数据统计</h2> -->
    <!-- 数据看板 -->
    <div class="grid grid-cols-4 gap-10 mb-6">
      <div
        v-for="(stat, index) in statistics"
        :key="index"
        class="bg-white rounded-lg p-20 border-1 shadow"
      >
        <div class="flex items-start gap-10">
          <div
            class="w-40 h-40 rounded-lg flex items-center justify-center"
            :class="stat.iconBg"
          >
            <i :class="`fas ${stat.icon} text-xl ${stat.iconColor}`"></i>
          </div>
          <div class="flex-1 min-w-0">
            <div class="text-gray-500 mb-1 truncate">{{ stat.title }}</div>
            <span class="text-2xl font-semibold">{{ stat.value }}</span>
            <div class="text-sm text-gray-400 mt-2">
              <span
                :class="stat.trend >= 0 ? 'text-green-500' : 'text-red-500'"
              >
                <i
                  :class="
                    stat.trend >= 0 ? 'fas fa-arrow-up' : 'fas fa-arrow-down'
                  "
                ></i>
                {{ Math.abs(stat.trend) }}%
                <span class="text-gray-400 ml-1">较上月</span>
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <h2 class="text-2xl font-bold mb-6 text-gray-800">智能应用</h2>
    <!-- 功能卡片 -->
    <div class="grid grid-cols-3 gap-10">
      <el-card
        v-for="(feature, index) in features"
        :key="index"
        shadow="hover"
        class="border-1 shadow"
      >
        <div class="flex items-start justify-between mb-4">
          <div
            :class="`w-40 h-40 rounded-lg flex items-center justify-center ${feature.iconBg}`"
          >
            <i :class="`fas ${feature.icon} text-xl ${feature.iconColor}`"></i>
          </div>
          <el-button
            type="primary"
            class="!rounded-button whitespace-nowrap"
            plain
          >
            立即使用
          </el-button>
        </div>
        <h3 class="text-lg font-semibold mb-2 leading-tight">
          {{ feature.title }}
        </h3>
        <p class="text-gray-500 text-sm line-clamp-2">
          {{ feature.description }}
        </p>
        <div class="mt-4 flex items-center gap-4">
          <el-tag
            v-for="(tag, tagIndex) in feature.tags"
            :key="tagIndex"
            size="small"
            :type="tag.type"
            :effect="tag.effect"
            class="whitespace-nowrap"
          >
            {{ tag.text }}
          </el-tag>
        </div>
      </el-card>
    </div>
  </main>
</template>
<script>
export default {
  name: "App",
  data() {
    return {
      statistics: [
        {
          title: "智能教案生成数",
          value: "8,526",
          icon: "fa-file-alt",
          iconBg: "bg-blue-50",
          iconColor: "text-blue-600",
          trend: 12.5,
        },
        {
          title: "课件制作数量",
          value: "15,248",
          icon: "fa-tasks",
          iconBg: "bg-green-50",
          iconColor: "text-green-600",
          trend: 8.3,
        },
        {
          title: "备赛方案生成数",
          value: "2,156",
          icon: "fa-trophy",
          iconBg: "bg-gray-50",
          iconColor: "text-amber-600",
          trend: 35.8,
        },
        {
          title: "实训场景生成数",
          value: "3,842",
          icon: "fa-vr-cardboard",
          iconBg: "bg-red-50",
          iconColor: "text-red-600",
          trend: 28.5,
        },
      ],
      features: [
        {
          title: "智能教案生成",
          description:
            "支持多种国际课程标准，自动生成教学目标、流程和活动设计方案",
          icon: "fa-graduation-cap",
          iconBg: "bg-blue-50",
          iconColor: "text-blue-600",
          tags: [
            { text: "IB课程", class: "bg-blue-50 text-blue-600" },
            { text: "新功能", class: "bg-green-50 text-green-600" },
          ],
        },
        {
          title: "智能课件制作",
          description:
            "内置 500+ 专业模板，支持一键生成多媒体课件，智能排版与内容优化",
          icon: "fa-file-powerpoint",
          iconBg: "bg-indigo-50",
          iconColor: "text-indigo-600",
          tags: [
            { text: "智能排版", class: "bg-indigo-50 text-indigo-600" },
            { text: "热门", class: "bg-orange-50 text-orange-600" },
          ],
        },
        {
          title: "技能大赛智能备赛",
          description:
            "基于AI分析历年真题与评分标准，提供个性化备赛方案和自适应难度训练",
          icon: "fa-trophy",
          iconBg: "bg-gray-50",
          iconColor: "text-amber-600",
          tags: [
            { text: "智能备赛", class: "bg-amber-50 text-amber-600" },
            { text: "最新", class: "bg-blue-50 text-blue-600" },
          ],
        },
        {
          title: "实训场景模拟",
          description:
            "基于AI生成高仿真虚拟实训环境，支持多模态交互，包括语音指令、手势识别和 AR 文档展示",
          icon: "fa-vr-cardboard",
          iconBg: "bg-red-50",
          iconColor: "text-red-600",
          tags: [
            { text: "虚拟实训", class: "bg-red-50 text-red-600" },
            { text: "最新", class: "bg-blue-50 text-blue-600" },
          ],
        },

        {
          title: "智能作业系统",
          description:
            "覆盖 12 种常见题型，支持跨学科智能组卷，含详细解析和答案批改功能",
          icon: "fa-tasks",
          iconBg: "bg-purple-50",
          iconColor: "text-purple-600",
          tags: [
            { text: "自动组卷", class: "bg-purple-50 text-purple-600" },
            { text: "批量处理", class: "bg-gray-100 text-gray-600" },
          ],
        },
        {
          title: "代码教学助手",
          description:
            "支持 Python/Java/C++ 等多语言示例生成，实时运行环境和语法指导",
          icon: "fa-code",
          iconBg: "bg-green-50",
          iconColor: "text-green-600",
          tags: [
            { text: "多语言", class: "bg-green-50 text-green-600" },
            { text: "推荐", class: "bg-yellow-50 text-yellow-600" },
          ],
        },
        {
          title: "文献智能处理",
          description:
            "支持文献摘要生成、关键词提取、重点标注，自动生成研究动态分析报告",
          icon: "fa-book",
          iconBg: "bg-blue-50",
          iconColor: "text-blue-600",
          tags: [
            { text: "AI 辅助", class: "bg-blue-50 text-blue-600" },
            { text: "效率工具", class: "bg-gray-100 text-gray-600" },
          ],
        },
        {
          title: "学术研究工具",
          description:
            "提供数据可视化模板、引用格式检查、学术写作建议等研究支持功能",
          icon: "fa-microscope",
          iconBg: "bg-yellow-50",
          iconColor: "text-yellow-600",
          tags: [
            { text: "研究助手", class: "bg-yellow-50 text-yellow-600" },
            { text: "Beta", class: "bg-red-50 text-red-600" },
          ],
        },
        {
          title: "AI 智能助教",
          description:
            "提供全天候在线答疑、学习进度跟踪、个性化辅导建议等智能教学支持",
          icon: "fa-robot",
          iconBg: "bg-pink-50",
          iconColor: "text-pink-600",
          tags: [
            { text: "智能答疑", class: "bg-pink-50 text-pink-600" },
            { text: "新上线", class: "bg-blue-50 text-blue-600" },
          ],
        },
      ],
    };
  },
  methods: {
    goTarget(href) {
      window.open(href, "_blank");
    },
  },
};
</script>
<style scoped>
.container {
  min-height: calc(100vh - 70px);
}
.bg-gray-50 {
  background-color: #f9fafb;
}
::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background-color: #e5e7eb;
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background-color: #d1d5db;
}
input[type="text"]:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
}
</style>
